<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="部门" prop="name"></el-table-column>
    <el-table-column label="部门介绍" prop="address"></el-table-column>
    <el-table-column label="日期" prop="date">
      <template #default="scope">
        <el-date-picker
          v-model="scope.row.date"
          type="date"
          placeholder="请选择修改的日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
          style="width: 190px;"
        />
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <el-button 
        style="width: 50px"
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="box6">
    <div class="block">
      <div class="box6-1">
    <el-input v-model="bumen" style="width: 240px" placeholder="Please input" />
    <el-input v-model="jianjie" style="width: 240px" placeholder="Please input" />
      <el-date-picker
        v-model="riqi"
        type="date"
        placeholder="Pick a date"
        :default-value="new Date(2010, 9, 1)"
      />
    </div>
  </div>
  <el-button plain @click="handleAddClick" style="width: 50px">
      添加
    </el-button>
  </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
const bumen = ref('')
const jianjie = ref('')
const riqi = ref()

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)

const handleDelete = (index, row) => {
  tableData.splice(index, 1)
  console.log(index, row)
}
// 定义表格数据
const tableData = reactive([
  {
    name: '销售部',
    date: '',
    address: '负责旅游产品的直接销售，通过线上平台（如官网、电商渠道）或线下渠道（门店、电话咨询）对接客户。',
  },
  {
    name: '产品运营部',
    date: '',
    address: '设计旅游线路（如周边游、短线跟团游），对接酒店、交通、景区等供应商，确定行程细节和价格。',
  },
  {
    name: '客服部',
    date: '',
    address: '受理客户咨询、订单处理、退改需求及投诉，提供售前、售中、售后全流程服务。',
  },
  {
    name: '财务部',
    date: '',
    address: '处理公司财务事务，包括收入核算、成本报销、供应商付款、税务申报等。',
  },
  {
    name: '行政人事部',
    date: '',
    address: '负责公司日常运营支持，如办公物资采购、场地管理、证件年检等。',
  },

])
//添加行
function handleAddClick(){
  if(bumen.value === '' || bumen.value.trim() == ''  ){
    alert('请输入部门名称')
  }else if(jianjie.value === '' || jianjie.value.trim() == ' ' ){
    alert('请输入部门介绍')
  }else if(riqi.value === '' ){
    alert('请选择部门成立日期')
  }else{
  tableData.push({
    name: bumen.value,
    date: riqi.value ? riqi.value.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') : '',
    address: jianjie.value,
  })
}
}

</script>
<style scoped>
*{
  margin: 0;
  padding: 0;

}
.box6-1{
  width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box6{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);

}

</style>